<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>审核</span>
          <el-button @click="goBack" type="primary" plain>返回</el-button>
        </div>
      </template>
      <!-- 标签页 -->
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="basicInfo">
          <el-form ref="shopinfoRef" :model="form" :rules="rules" label-width="120px" v-loading="loading">
            <!-- 会员名称不可修改 -->
            <el-divider content-position="left" style="font-size: 18px; font-weight: bold;">基本信息</el-divider>
            <el-form-item label="会员名称" prop="memberName">
              <div style="display: flex; align-items: center;">
                <el-input v-model="form.memberName" placeholder="请输入会员名称" :disabled="route.query.mode !== 'add'"
                  disabled />
                <el-button v-if="route.query.mode === 'add'" @click="showMemberDialog"
                  style="margin-left: 10px;">选择会员</el-button>
              </div>
            </el-form-item>

            <el-form-item label="店铺名称" prop="storeName">
              <el-input v-model="form.storeName" placeholder="请输入店铺名称" />
            </el-form-item>
            <el-form-item label="是否自营" prop="isSelfOperated">
              <!-- 变成单选框，默认根据form.isSelfOperated的值，如果为0，则选中自营，如果为1，则选中非自营 -->
              <el-radio-group v-model="form.isSelfOperated" size="large">
                <el-radio-button label="自营" :value="0" />
                <el-radio-button label="非自营" :value="1" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="店铺所在地" prop="storeLocation" disabled>
              <div style="display: flex; align-items: center;">
                <el-input v-model="form.storeLocation" placeholder="请输入店铺所在地" />
                <!-- 点击选择，出现弹出框，弹出框显示省市区选择，选择后，输入框显示选择的内容 -->
                <el-button @click="showLocationDialog">选择</el-button>

              </div>
            </el-form-item>
            <el-form-item label="店铺详细地址" prop="storeAddress" disabled>
              <el-input v-model="form.storeAddress" placeholder="请输入店铺详细地址" />
            </el-form-item>
            <el-form-item label="店铺logo" prop="storeLogo">
              <image-upload v-model="form.storeLogo" :limit="1" />
            </el-form-item>
            <el-form-item label="店铺简介" prop="storeDescription" disabled>
              <el-input v-model="form.storeDescription" type="textarea" :rows="3" placeholder="请输入店铺简介" />
            </el-form-item>

            <!-- 退货收件地址 -->
            <el-divider content-position="left" style="font-size: 18px; font-weight: bold;">退货收件地址</el-divider>
            <el-form-item label="收货人姓名" prop="receiverName">
              <el-input v-model="form.receiverName" placeholder="请输入收货人姓名" />
            </el-form-item>
            <el-form-item label="收件人手机号" prop="receiverPhone">
              <el-input v-model="form.receiverPhone" placeholder="请输入收件人手机" />
            </el-form-item>
            <el-form-item label="地址信息" prop="receiverAddress">
              <span>暂无地址</span>
              <el-button style="margin-left: 10px;">选择</el-button>
            </el-form-item>
            <el-form-item label="详细地址" prop="receiverAddressDetail">
              <el-input v-model="form.receiverAddressDetail" placeholder="请输入详细地址" />
            </el-form-item>

            <el-button @click="nextStep"
              style="background-color: #FF5C58; color: white; border-color: #FF5C58;">下一步</el-button>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="入驻信息" name="entryInfo">
          <el-form ref="shopinfoRef" :model="form" :rules="rules" label-width="120px" v-loading="loading">
            <!-- 公司信息 -->
            <el-divider content-position="left" style="font-size: 18px; font-weight: bold;">公司信息</el-divider>
            <el-form-item label="公司名称" prop="companyName" disabled>
              <el-input v-model="form.companyName" placeholder="请输入公司名称" />
            </el-form-item>
            <el-form-item label="公司电话" prop="companyPhone" disabled>
              <el-input v-model="form.companyPhone" placeholder="请输入公司电话" />
            </el-form-item>
            <el-form-item label="公司所在地" prop="companyLocation" disabled>
              <el-input v-model="form.companyLocation" placeholder="请输入公司所在地" />
              <el-button style="margin-left: 10px;">选择</el-button>
            </el-form-item>
            <el-form-item label="公司实际地址" prop="companyAddress" disabled>
              <el-input v-model="form.companyAddress" placeholder="请输入公司实际地址" />
            </el-form-item>
            <el-form-item label="员工总数" prop="employeeCount" disabled>
              <el-input v-model="form.employeeCount" placeholder="请输入员工总数" />
            </el-form-item>
            <el-form-item label="注册资金" prop="registeredCapital" disabled>
              <el-input v-model="form.registeredCapital" placeholder="请输入注册资金(万)" />
              万
            </el-form-item>
            <el-form-item label="联系人姓名" prop="contactName" disabled>
              <el-input v-model="form.contactName" placeholder="请输入联系人姓名" />
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email" disabled>
              <el-input v-model="form.email" placeholder="请输入电子邮箱" />
            </el-form-item>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="库存预警数" prop="stockWarningNum">
                  <el-input v-model="form.stockWarningNum" placeholder="请输入库存预警数" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>

            <!-- 营业执照信息 -->
            <el-divider content-position="left" style="font-size: 18px; font-weight: bold;">营业执照信息</el-divider>
            <el-form-item label="营业执照号" prop="businessLicenseNo" disabled>
              <el-input v-model="form.businessLicenseNo" placeholder="请输入营业执照号" />
            </el-form-item>
            <el-form-item label="法定经营范围" prop="businessScope" disabled>
              <el-input v-model="form.businessScope" type="textarea" :rows="3" placeholder="请输入法定经营范围" />
            </el-form-item>
            <el-form-item label="营业执照电子版" prop="businessLicenseImage" disabled>
              <image-upload v-model="form.businessLicenseImage" :limit="1" :disabled="true" />
            </el-form-item>

            <!-- 法人信息 -->
            <el-divider content-position="left" style="font-size: 18px; font-weight: bold;">法人信息</el-divider>
            <el-form-item label="法人姓名" prop="legalPersonName" disabled>
              <el-input v-model="form.legalPersonName" placeholder="请输入法人姓名" />
            </el-form-item>
            <el-form-item label="法人证件号" prop="legalPersonId" disabled>
              <el-input v-model="form.legalPersonId" placeholder="请输入法人证件号" />
            </el-form-item>
            <el-form-item label="身份证照片" prop="legalPersonIdPhoto">
              <image-upload v-model="form.legalPersonIdPhoto" :limit="2" />
              <div style="color: #999; font-size: 12px; margin-top: 5px;">
                点击图片上传身份证正反面，要求身份证清晰，四角无缺漏
              </div>
            </el-form-item>

            <!-- 结算银行信息 -->
            <el-divider content-position="left" style="font-size: 18px; font-weight: bold;">结算银行信息</el-divider>
            <el-form-item label="结算银行开户名" prop="bankAccountName" disabled>
              <el-input v-model="form.bankAccountName" placeholder="请输入结算银行开户名" />
            </el-form-item>
            <el-form-item label="结算银行账号" prop="bankAccountNumber" disabled>
              <el-input v-model="form.bankAccountNumber" placeholder="请输入结算银行账号" />
            </el-form-item>
            <el-form-item label="银行支行名称" prop="bankBranchName" disabled>
              <el-input v-model="form.bankBranchName" placeholder="请输入银行支行名称" />
            </el-form-item>
            <el-form-item label="支行联行号" prop="bankBranchCode" disabled>
              <el-input v-model="form.bankBranchCode" placeholder="请输入支行联行号" />
            </el-form-item>

            <el-button @click="prevStep"
              style="background-color: #FA6419; color: white; border-color: #FA6419;">上一步</el-button>
            <el-button @click="nextStep"
              style="background-color: #FF5C58; color: white; border-color: #FF5C58;">下一步</el-button>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="经营范围" name="scope">
          <el-form ref="shopinfoRef" :model="form" :rules="rules" label-width="120px" v-loading="loading">
            <el-form-item label="经营范围" prop="scope">
              <el-input v-model="form.scope" placeholder="请输入经营范围" />
            </el-form-item>

            <el-button @click="prevStep"
              style="background-color: #FA6419; color: white; border-color: #FA6419;">上一步</el-button>
            <el-button @click="nextStep"
              style="background-color: #FF5C58; color: white; border-color: #FF5C58;">下一步</el-button>
          </el-form>
        </el-tab-pane>

                 <el-tab-pane label="结算信息" name="settlementInfo">
           <el-form ref="shopinfoRef" :model="form" :rules="rules" label-width="120px" v-loading="loading">
             <!-- 结算信息 -->
             <el-form-item label="结算日期" prop="settlementDate">
               <el-input v-model="form.settlementDate" placeholder="结算日期" disabled />
             </el-form-item>

             <el-button @click="prevStep"
               style="background-color: #FA6419; color: white; border-color: #FA6419;">上一步</el-button>
             <el-button @click="showAuditDialog" style="background-color: #FF5C58; color: white; border-color: #FF5C58;" v-hasPermi="['dianpu:shenhe:edit']">
               审核
             </el-button>
           </el-form>
         </el-tab-pane>
      </el-tabs>
    </el-card>

    

         <!-- 审核对话框 -->
          <!-- 审核店铺，居中显示 -->
     <el-dialog v-model="auditDialogVisible" title="审核店铺" width="400px" style="margin-top: 100px; text-align: center;">
      <el-divider style="border-style: solid;"/> 
      <div style="text-align: center; padding: 20px;">
         <p style="font-size: 16px; color: #333; margin-bottom: 20px;">您确定要审核通过该店铺？</p>
       </div>
       <el-divider style="border-style: solid;"/> 
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="auditDialogVisible = false">取消</el-button>
           <el-button @click="handleReject" style="background-color: #F56C6C; color: white; border-color: #F56C6C;">
             驳回
           </el-button>
           <el-button @click="handleApprove" style="background-color: #67C23A; color: white; border-color: #67C23A;">
             通过
           </el-button>
         </span>
       </template>
     </el-dialog>

     <!-- 选择会员对话框 -->
     <el-dialog v-model="memberDialogVisible" title="选择会员" width="800px">
       <el-form :inline="true" :model="memberQueryParams" class="demo-form-inline">
         <el-form-item label="会员名称">
           <el-input v-model="form.memberName" placeholder="请输入会员名称" :disabled="route.query.mode !== 'add'" disabled />
           <el-button v-if="route.query.mode === 'add'" @click="showMemberDialog"
             style="margin-left: 10px;">选择会员</el-button>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="searchMembers">搜索</el-button>
           <el-button @click="resetMemberQuery">重置</el-button>
         </el-form-item>
       </el-form>

       <el-table :data="memberList" @row-click="selectMember" style="cursor: pointer;">
         <el-table-column prop="memberName" label="会员名称" />
         <el-table-column prop="phone" label="手机号" />
         <el-table-column prop="email" label="邮箱" />
         <el-table-column prop="status" label="状态">
           <template #default="scope">
             <el-tag v-if="scope.row.status === 0" type="success">正常</el-tag>
             <el-tag v-else-if="scope.row.status === 1" type="danger">禁用</el-tag>
             <span v-else>{{ scope.row.status }}</span>
           </template>
         </el-table-column>
       </el-table>

       <el-pagination v-if="memberTotal > 0" :total="memberTotal" v-model:current-page="memberQueryParams.pageNum"
         v-model:page-size="memberQueryParams.pageSize" @current-change="searchMembers"
         layout="total, prev, pager, next" />

       <template #footer>
         <span class="dialog-footer">
           <el-button @click="memberDialogVisible = false">取消</el-button>
         </span>
       </template>
     </el-dialog>
  </div>
</template>

<script setup name="ShenheDetail">
import { getShenhe, updateShenhe } from "@/api/dianpu/shenhe"

const { proxy } = getCurrentInstance()
const route = useRoute()

const loading = ref(true)
const activeName = ref('basicInfo')
const form = ref({})
const rules = ref({})

// 审核相关
const auditDialogVisible = ref(false)

// 会员相关
const memberDialogVisible = ref(false)
const memberList = ref([])
const memberTotal = ref(0)
const memberQueryParams = ref({
  pageNum: 1,
  pageSize: 10,
  memberName: ''
})



/** 获取店铺详情 */
function getShopDetail() {
  const id = route.query.id
  if (!id) {
    proxy.$modal.msgError("店铺ID不能为空")
    return
  }

  loading.value = true
  getShenhe(id).then(response => {
    form.value = response.data
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

/** 返回上一页 */
function goBack() {
  proxy.$router.go(-1)
}

/** 标签页点击事件 */
function handleClick(tab) {
  console.log('切换到标签页:', tab.props.name)
}

/** 下一步 */
function nextStep() {
  const tabs = ['basicInfo', 'entryInfo', 'scope', 'settlementInfo']
  const currentIndex = tabs.indexOf(activeName.value)
  if (currentIndex < tabs.length - 1) {
    activeName.value = tabs[currentIndex + 1]
  }
}

/** 上一步 */
function prevStep() {
  const tabs = ['basicInfo', 'entryInfo', 'scope', 'settlementInfo']
  const currentIndex = tabs.indexOf(activeName.value)
  if (currentIndex > 0) {
    activeName.value = tabs[currentIndex - 1]
  }
}

/** 显示会员选择对话框 */
function showMemberDialog() {
  memberDialogVisible.value = true
  searchMembers()
}

/** 搜索会员 */
function searchMembers() {
  // 这里应该调用会员搜索API
  // 暂时使用模拟数据
  memberList.value = [
    { memberName: '测试会员1', phone: '13800138001', email: 'test1@example.com', status: 0 },
    { memberName: '测试会员2', phone: '13800138002', email: 'test2@example.com', status: 0 }
  ]
  memberTotal.value = 2
}

/** 重置会员查询 */
function resetMemberQuery() {
  memberQueryParams.value = {
    pageNum: 1,
    pageSize: 10,
    memberName: ''
  }
  searchMembers()
}

/** 选择会员 */
function selectMember(row) {
  form.value.memberName = row.memberName
  memberDialogVisible.value = false
}

/** 显示审核对话框 */
function showAuditDialog() {
  auditDialogVisible.value = true
}

/** 显示地址选择对话框 */
function showLocationDialog() {
  // 这里应该实现地址选择功能
  proxy.$modal.msgInfo("地址选择功能待实现")
}

/** 通过审核 */
function handleApprove() {
  const shopData = {
    id: form.value.id,
    storeStatus: 0  // 设置为开启状态
  }
  updateShenhe(shopData).then(() => {
    proxy.$modal.msgSuccess("审核通过成功")
    auditDialogVisible.value = false
    goBack()
  }).catch(() => {})
}

/** 拒绝审核 */
function handleReject() {
  const shopData = {
    id: form.value.id,
    storeStatus: 1  // 设置为禁用状态
  }
  updateShenhe(shopData).then(() => {
    proxy.$modal.msgSuccess("审核拒绝成功")
    auditDialogVisible.value = false
    goBack()
  }).catch(() => {})
}

// 页面加载时获取详情
getShopDetail()
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
